<template>
    <div>
      <div id="J_prismPlayer"></div>
    </div>
  </template>
  
  <script>
  import api from '@/api/movieData/movieData'
  
  export default {
    data(){
      return{
        playInfo: {
          image:'',
          playId: "",
          playAuth: "",
        },
        //弹幕列表
        danmukuList: [{
          "mode": 1,
          "text": "test",
          "stime": 1000,
          "size": 25,
          "color": 0xffffff
        }, {
          "mode": 1,
          "text": "test",
          "stime": 2000,
          "size": 25,
          "color": 0xff0000
        }, {
          "mode": 1,
          "text": "test",
          "stime": 30000,
          "size": 25,
          "color": 0xff0000
        }, {
          "mode": 1,
          "text": "test",
          "stime": 4000,
          "size": 25,
          "color": 0x00c1de
        }]
      }
    },
    created(){
      this.fetchData();
    },
    methods:{
      fetchData(){
        //获取视频id
        const id = this.$route.query.id;
        //根据视频id查询视频信息与播放密钥
        api.getPlayAuth(id).then(res=>{
          this.playInfo = res.data.data;
          // console.log(this.playInfo);
          // console.log(this.playInfo.playId);
          // console.log(this.playInfo.playAuth);

          //阿里云播放器
          var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '1200px',
            height: '650px',
            components: [{
              //倍速
              name: 'RateComponent',
              type: AliPlayerComponent.RateComponent
            },
            {
              //清晰度
              name: 'QualityComponent',
              type: AliPlayerComponent.QualityComponent,
              args: [function(definition,desc) {
                console.log(definition + '-----' + desc)
              }]
            },
            {
              //弹幕
              name: 'AliplayerDanmuComponent',
              type: AliPlayerComponent.AliplayerDanmuComponent,
              args: [this.danmukuList]
            }], 
            autoplay: false, //自动播放
            controlBarVisibility: 'hover', //隐藏播放条
            isLive: false, //直播
            cover: this.playInfo.image, //视频缩略图
            vid : this.playInfo.playId, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
            playauth : this.playInfo.playAuth //必选参数。音视频播放凭证。
          });

            
          //音频文件测试
          // var player = new Aliplayer({
          //   id: 'J_prismPlayer',
          //   width: '1200px',
          //   height: '650px',
          //   autoplay: true, //自动播放
          //   controlBarVisibility: 'hover', //隐藏播放条
          //   isLive: false, //直播
          //   format: 'mp3', 
          //   mediaType: 'audio' ,
          //   cover: this.playInfo.image, //视频缩略图
          //   vid : this.playInfo.playId, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          //   playauth : this.playInfo.playAuth //必选参数。音视频播放凭证。
          // });
  
        })
  
      }
    }
  }
  </script>
  
  <style>
  #J_prismPlayer{
    margin: 0 auto;
    padding: 0;
  }
  </style>